<!--
 * @Author: lsmi
 * @Date: 2021-07-11 21:25:46
 * @LastEditors: lsmi
 * @LastEditTime: 2021-07-11 21:33:53
 * @FilePath: \v2_play_js\src\views\TestSwiper.vue
-->
<!--  -->
<template>
  <div class="" style="height: 600px">
    <!-- <swiper class="swiper" :options="swiperOptions" style="height: 600px">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper> -->
    <el-carousel class="carousel" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 20" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// import SwiperCore, { Pagination, Autoplay } from "swiper";
// SwiperCore.use([Pagination, Autoplay]);
export default {
  components: {},
  data() {
    return {
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "my-bullet-active",
          // 分页器隐藏时的类名。
          hiddenClass: "my-pagination-hidden",
        },
      },
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss" scoped>
//@import url();
.carousel {
  ::v-deep.el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}
</style>
